<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, ul, li {
            margin: 0;
            padding: 0
        }

        li {
            float: left;
            width: 100px;
            height: 24px;
            line-height: 24px;
            list-style: none;
            border: solid 1px;
            text-align: center;
        }

        #cart {
            width: 700px;
            text-align: center;
        }

        .num input {
            width: 30px;
            text-align: center;
        }

        ul {
            background-color: cornflowerblue;

        }

        /*ul:nth-child(0) {*/
        /*background-color: aqua;*/
        /*}*/

        .num {
            width: 150px;
        }

        #total {
            clear: both;
            text-align: right;
            padding-right: 50px;
            padding-top: 5px;
        }

        #total span {
            color: red
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>
<body>
<div id="cart">
    <ul>
        <li><input name="all" type="checkbox">全选</li>
        <li>产品名称</li>
        <li>价格</li>
        <li class="num">数量</li>
        <li>合计</li>
        <li>操作</li>
    </ul>
    <!--view-->
    <ul v-for="product in productList" :key="product.name">
        <li><input name="one" type="checkbox"></li>
        <li>{{product.name}}</li>
        <li>{{product.price}}</li>
        <li class="num"><input type="button" value="-" @click="handleMinus(product.name)"> <input v-model="product.count" type="text" value="1"> <input
                type="button" value="+" @click="handleAdd(product.name)">
        </li>
        <li>{{product.price * product.count}}</li>
        <li><span @click="handleDelete(product.name)">删除</span></li>
    </ul>

    <div id="total">总价:<span>1000</span></div>
    <input name="add" type="button" value="添加" @click="handleSubmit">
</div>
</body>
</html>
<script>
    let products = [{name: "电脑", price: 10000}, {name: "u盘", price: 30}, {name: "充电器", price: 50}, {
        name: "鼠标",
        price: 65
    }]

    const {createApp, ref, onMounted} = Vue

    createApp({
        setup() {
            //响应数据必须用ref修饰 , 被监听的数据
            const productList = ref([])

            let handleSubmit = () => {
                let product = {...products[Math.floor(Math.random() * 4)], count: 1}
                let index = productList.value.findIndex(item => item.name == product.name)
                if(index < 0){
                    productList.value.push(product)
                }else{
                    productList.value[index].count++
                }
            }

            let handleDelete = (name) => {
                let index = productList.value.findIndex(item => item.name == name)
                productList.value.splice(index,1)

            }

            let handleAdd = (name) => {
                let index = productList.value.findIndex(item => item.name == name)
                productList.value[index].count++
            }

            let handleMinus = (name) => {
                let index = productList.value.findIndex(item => item.name == name)
                productList.value[index].count = productList.value[index].count == 1 ? productList.value[index].count : productList.value[index].count-1
            }
            //在模板中使用的方法、数据，都要return
            return {
                productList, handleSubmit, handleDelete, handleAdd, handleMinus
            }
        }
    }).mount('#cart')
</script>
